<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width="850"
    placement="right"
    :closable="true"
    @close="visible = false"
    :visible="visible"
    style="overflow: auto;padding-bottom: 53px;"
  >
    <a-card :bordered="false">
      <!-- <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="职务名称">
                <a-input v-model="queryParam.name" placeholder="" />
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="24">
              <a-form-item label="成立日期">
                <a-date-picker v-model="queryParam.createTime" style="width: 100%" placeholder="请输入成立日期" />
              </a-form-item>
            </a-col>

            <a-col :md="(!advanced && 6) || 24" :sm="24">
              <span
                class="table-page-search-submitButtons"
                :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}"
              >
                <a-button type="primary" @click="searchQuery">查询</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div> -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleAdd" type="primary" :disabled="userDisable" icon="plus">新增</a-button>
        <!-- <a-button type="primary" icon="import" @click="visibleImport = true" >导入</a-button> -->
        <XImport
          v-model="visibleImport"
          moduleName="userPosition"
          @ok="searchQuery"
          @cancel="visibleImport = false"
        ></XImport>

        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel"
              ><a-icon type="delete" v-has="'Society:delete'" />批量删除</a-menu-item
            >
          </a-menu>
          <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down"/></a-button>
        </a-dropdown>
      </div>

      <a-table
        ref="table"
        size="default"
        rowKey="id"
        :scroll="{ x: true }"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
        @onSelect="onChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)" v-has="'Society:edit'" style="margin-left:10px">编辑</a>
          <a-popconfirm
            v-has="'Society:delete'"
            style="margin-left:10px"
            title="确定删除?"
            @confirm="() => handleDelete(record.id)"
          >
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>

    <UserPositionModal ref="UserPositionModal" @ok="searchQuery"></UserPositionModal>
  </a-drawer>
</template>

<script>
import STable from '@/components/table/'
import XSelectUserByDep from '@/components/extends/XSelectUserByDep'
import AInput from 'ant-design-vue/es/input/Input'
import moment from 'moment'
import { merge } from 'lodash'
import XImport from '@/components/extends/XImport.vue'
import { getAction, postAction, deleteAction } from '@/api/manage'
import UserPositionModal from './UserPositionModal'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
export default {
  name: 'UserDepartRolesModal',
  props:{
    userDisable: Boolean
  },
  components: {
    AInput,
    STable,
    XImport,
    XSelectUserByDep,
    UserPositionModal
  },
  mixins: [JeecgListMixin],
  data() {
    return {
      title: '任职历史',
      visible: false,
      visibleImport: false,
      toggleSearchStatus: false,
      form: null,
      model: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {
        userId: '',
        userName: ''
      },
      url: {
        list: '/sys/userPosition/list',
        add: '/sys/userPosition/add',
        edit: '/sys/userPosition/edit',
        delete: '/sys/userPosition/delete',
        deleteBatch: '/sys/userPosition/deleteBatch',
        exportXlsUrl: ''
      },
      // 表头
      columns: [
        {
          title: '姓名',
          align: 'center',
          dataIndex: 'userName'
        },
        {
          title: '职务编码',
          align: 'center',
          dataIndex: 'postCode'
        },
        {
          title: '职务名称',
          align: 'center',
          dataIndex: 'postName'
        },
        {
          title: '职级',
          align: 'center',
          dataIndex: 'postRank_dictText'
        },
        {
          title: '在职状态',
          align: 'center',
          dataIndex: 'postStatus',
          customRender(text, record) {
            let map = {
              0: '在职',
              1: '离职'
            }
            return map[text]
          }
        },
        {
          title: '任职时间',
          align: 'center',
          width: 250,
          dataIndex: 'beginTime',
          customRender(text, record) {
            var str = ''
            if (record.beginTime) str = moment(record.beginTime).format('YYYY/MM/DD')
            if (record.endTime) str += ' - ' + moment(record.endTime).format('YYYY/MM/DD')
            return str
          }
        },
        {
          title: '操作',
          align: 'center',
          // dataIndex: 'action',
          fixed: 'right',
          width: 120,
          scopedSlots: { customRender: 'action' }
        }
      ],
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  methods: {
    handleAdd() {
      this.$refs.UserPositionModal.title = '添加'
      this.$refs.UserPositionModal.add(this.queryParam)
    },
    handleEdit(record) {
      this.$refs.UserPositionModal.title = '编辑'
      this.$refs.UserPositionModal.edit(record)
    },
    handleReview(record) {
      this.$refs.UserPositionModal.review(record)
    },
    handleToggleSearch() {
      this.toggleSearchStatus = !this.toggleSearchStatus
    },
    handleDelete(id) {
      deleteAction(this.url.delete, { id }).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.searchQuery()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    batchDel: function() {
      if (!this.url.deleteBatch) {
        this.$message.error('请设置api.leteBatch属性!')
        return
      }
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return
      } else {
        var ids = ''
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ','
        }
        var that = this
        this.$confirm({
          title: '确认删除',
          content: '是否删除选中数据?',
          onOk: function() {
            that.loading = true
            deleteAction(that.url.deleteBatch, { ids: ids })
              .then(res => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.selectedRowKeys = []
                  that.selectionRows = []
                  that.searchQuery()
                } else {
                  that.$message.warning(res.message)
                }
              })
              .finally(() => {
                that.loading = false
              })
          }
        })
      }
    },
    // searchQuery() {
    //   let selt = this
    //   this.$nextTick(() => {
    //     selt.$refs.table.refresh()
    //   })
    // },
    // onSelectChange(selectedRowKeys, selectionRows) {
    //   this.selectedRowKeys = selectedRowKeys
    //   this.selectionRows = selectionRows
    // },
    onChange(row) {
      this.selectedRowKeys = row.selectedRowKeys
      this.selectedRows = row.selectedRows
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date())
      }
    }
  }
}
</script>
